.intercom{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center
}
.intercom p{
    text-align: center;
}
.intercom .name{
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    transform: translateY(20px);
}
.intercom .time{
    flex: 1;
    color: #00AAFF;
}
.intercom .status_text{
    flex: 1;
}
.intercom .animation{
    flex: 3;
    transform: translateY(40px);
}
.intercom .animation .loader {
    width: 60px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#1dec77 0 0);
    background:
            var(--c) 0%   50%,
            var(--c) 50%  50%,
            var(--c) 100% 50%;
    animation: l7 1s infinite linear alternate;
}
.intercom .animation .static{
    width: 60px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#b6b6b6 0 0);
    background:
            var(--c) 0%   50%,
            var(--c) 50%  50%,
            var(--c) 100% 50%;
    background-size: 20% 20% ,20% 20% ,20% 20%
}
.intercom .loading{

}
@keyframes l7 {
    0%  {background-size: 20% 50% ,20% 50% ,20% 50% }
    20% {background-size: 20% 20% ,20% 50% ,20% 50% }
    40% {background-size: 20% 100%,20% 20% ,20% 50% }
    60% {background-size: 20% 50% ,20% 100%,20% 20%; --c: no-repeat linear-gradient(#ece91d 0 0);}
    80% {background-size: 20% 50% ,20% 50% ,20% 100%}
    100%{background-size: 20% 50% ,20% 50% ,20% 50% }
}

.intercom .phone{
    width: 50px;
    height: 50px;
}
.intercom .phone img{
    width: 25px;
    height: 25px;
    transform: rotate(136deg);
}
